<template>
  <div class="home">
    <type-nav />
    <list-container />
    <recommend />
    <rank />
    <like />
    <floor
      class="floor"
      v-for="floor in floorList"
      :key="floor.id"
      :list="floor"
    />
    <brand />
  </div>
</template>

<script>
import TypeNav from "@/components/content/typeNav/TypeNav.vue";
import ListContainer from "@/pages/home/childComps/listContainer/ListContainer.vue";
import Recommend from "./childComps/recommend/Recommend.vue";
import Rank from "./childComps/rank/Rank.vue";
import Like from "./childComps/like/Like.vue";
import Floor from "./childComps/floor/Floor.vue";
import Brand from "./childComps/brand/brand.vue";

import { mapState } from "vuex";

export default {
  components: {
    TypeNav,
    ListContainer,
    Recommend,
    Rank,
    Like,
    Floor,
    Brand,
  },
  name: "Home",
  data() {
    return {};
  },
  methods: {},
  computed: {
    ...mapState({
      floorList: (state) => state.home.floorList,
    }),
  },
  mounted() {
    // 派发action，获取floor组件的数据
    this.$store.dispatch("getFloorList");
    // 获取用户信息，在首页展示
    this.$store.dispatch("getUserInfo");
  },
};
</script>

<style lang='less' scoped>
.floor {
  overflow: hidden;
}
</style>
